<template>
  <div class="home">
    <div v-if="isLoading">
      <home-head></home-head>
      <home-swiper :banner="banner" ></home-swiper>
      <home-icons :icons="icons"></home-icons>        
      <recommend  :recommend="recommendList" ></recommend>
      <weekend  :weekend="weekendList"></weekend>
    </div>
    <div v-else class="Loading">
      <img src="../../assets/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
import HomeHead from './components/Head'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icons'
import Recommend from './components/Recommend'
import Weekend from './components/Weekend'
import {HomeModel} from '../../models/HomeModel'
const homemodel = new HomeModel()
export default {
  name: 'home',
  components: {
    HomeHead,
    HomeSwiper,
    HomeIcons,
    Recommend,
    Weekend
  },
  data(){
    return{
      banner:[],
      icons:[],
      recommendList:[],
      weekendList:[],
      isLoading:false
    }
  },
  mounted(){
    homemodel.getHome().then(res=>{
      let data = res.data.data;
      let { banner,icons,recommendList,weekendList } = data
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList = weekendList
      this.isLoading = "true"
    })
  }
}
</script>
<style lang="scss" scoped>
  .hots-title{
    line-height: 60px;
    background: #eee;
    text-align: left;
    padding: 20px;
  }
  .Loading{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
</style>

